<template>
  <view class="empty-state">
    <view class="empty-image" v-if="imageSrc">
      <image :src="imageSrc" mode="aspectFit"></image>
    </view>
    <view class="empty-text">
      <text class="empty-title" v-if="title">{{ title }}</text>
      <text class="empty-desc" v-if="description">{{ description }}</text>
    </view>
    <view v-if="showActions || buttonText" class="empty-actions">
      <slot name="actions">
        <view class="action-button" @click="handleAction">
          <text>{{ buttonText || actionText }}</text>
        </view>
      </slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'EmptyState',
  props: {
    // 图标地址
    icon: {
      type: String,
      default: require('@/static/images/empty/empty01.png')
    },
    // 图片地址（优先使用这个）
    imageSrc: {
      type: String,
      default: ''
    },
    // 提示标题
    title: {
      type: String,
      default: ''
    },
    // 提示描述
    description: {
      type: String,
      default: ''
    },
   
    // 是否显示操作按钮
    showActions: {
      type: Boolean,
      default: true
    },
    // 操作按钮文本
    actionText: {
      type: String,
      default: ''
    },
    // 按钮文本（新属性）
    buttonText: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleAction() {
      this.$emit('clickAction')
      this.$emit('try-examples')
    }
  }
}
</script>

<style lang="scss" scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 30rpx;
  
  .empty-image {
    width: 380rpx;
    height: 380rpx;
    // background-color: #e8ebf3;
    // border-radius: 50%;
    margin-bottom: 30rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    
    image {
      width: 380rpx;
      height: 380rpx;
    }
  }
  
  .empty-icon {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 40rpx;
    opacity: 0.6;
  }
  
  .empty-text {
    text-align: center;
    margin-bottom: 20rpx;
    
    .empty-title {
      font-size: 34rpx;
      font-weight: 500;
      margin-bottom: 15rpx;
      display: block;
      text-align: center;
    }
    
    .empty-desc {
      font-size: 28rpx;
      color: #888;
      text-align: center;
      line-height: 1.5;
      display: block;
    }
  }
  
  .empty-actions {
    margin-top: 20rpx;
    
    .action-button {
      background-color: transparent;
      border: 2rpx solid #4e6ef2;
      border-radius: 50rpx;
      padding: 20rpx 60rpx;
      
      text {
        color: #4e6ef2;
        font-size: 30rpx;
      }
    }
    
    .action-btn {
      margin-top: 20rpx;
      background-color: #1890FF;
      border-color: #1890FF;
      
      &:active {
        background-color: #096dd9;
        border-color: #096dd9;
      }
    }
  }
}
</style> 